<template>
  <div class="habitableRoomManagement">
    <el-row >
      <el-col style="display:flex;align-items: center;margin-bottom:10px;"><div class="border"></div><h3>服务履历信息</h3></el-col>
    </el-row>
    <el-row style="display:flex"> 
      <el-col >
      <div style="display:flex;align-items: center;margin-left:20px">
          <el-button class="addBtn boxShadowButton" icon="el-icon-circle-plus" style="margin-right:40px" @click="addList">添加</el-button>
          <p style="width:40px">搜索</p>
          <el-input style="width:260px;margin-right:10px"  v-model.trim="searchNo" @keyup.enter.native.prevent="search"></el-input>
           <el-button class="searchBtn boxShadowButton" @click="search">确认</el-button>
      </div>
      </el-col>
      <!-- <el-col align="right">
         <el-button class="prevPage boxShadowButton"  :disabled="pageNum==firstPage" @click="prevePage">{{habitableRoomManagement.prevePage}}</el-button>
           <el-button class="nextPage boxShadowButton"  :disabled="pageNum==lastPage"  @click="nextPage">{{habitableRoomManagement.nextPage}}</el-button>
      </el-col> -->
    </el-row>
     <el-table :data="tableData"  style="width: 100%;margin-top:10px;margin-left:20px"  :row-style="tableRowStyle" :header-cell-style="tableHeaderColor">
        <el-table-column type="index" label="No" min-width="50" align="center"></el-table-column>
        <el-table-column prop="roomNo"  label="异常" min-width="120" align="center"></el-table-column>
        <el-table-column prop="roomNo"  label="发生时间" min-width="120" align="center"></el-table-column>
        <el-table-column prop="roomNo"  label="服务内容 " min-width="120" align="center"></el-table-column>
        <el-table-column prop="roomNo"  label="服务负责人 " min-width="120" align="center"></el-table-column>
        <el-table-column label="操作" min-width="100" align="center">
          <template slot-scope="scope">
            <el-button class="detailBtn boxShadowButton" @click="detailClick(scope.row)" :size="size">选择</el-button>
          </template>
        </el-table-column>
      </el-table>

       <!-- 删除 -->
    <el-dialog
      :title="habitableRoomManagement.delet"
      :visible.sync="deletDialogVisible"
      width="30%"
      :center="true"
      >
      <h3 style="text-align: center">{{habitableRoomManagement.isDelet}}</h3>
      <span slot="footer" class="dialog-footer">
        <el-button
            class="deleteBtn boxShadowButton"
            @click="checkDelet"
            :size="size"
          >{{habitableRoomManagement.check}}</el-button>
        <el-button class="jiebangBtn boxShadowButton" :size="size"  @click="deletDialogVisible = false">{{habitableRoomManagement.cancel}}</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      background
      layout="total,prev, pager, next,jumper"
      :total="total"
      style="margin-top:20px"
      align= "center"
      :current-page='currentPage'
       @current-change="changePage">
    </el-pagination>
  </div>  
</template>
<script>
import axios from 'axios';
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
export default {
  name:"serverManage",
  data() {
    return {
        serverManage: this.$t('m.serverManage'),//引入 lang 里面的字符串资源,
      habitableRoomManagement: this.$t('m.habitableRoomManagement'),//引入 lang 里面的字符串资源,
      size:"mini",
      tableData:[{
          roomNo:'1',
          roomNo:'1',
          roomNo:'1',
          roomNo:'1',
          roomNo:'1',
          roomNo:'1',
          roomNo:'1',
          roomNo:'1',
          roomNo:'1',

      }],
      deletDialogVisible:false,
      dialogVisible:false,
      rowList:[],
      total:0,
      pageNum:1,
      pageSize:10,
      currentPage:1,
      searchNo:'',
      firstPage:'',//第一页
      lastPage:'',//最后一夜
      acceptLanguage:'ja_JP',//数据请求传参需要传的语言  ja_JP----日文

    }
  },
  methods:{
    //跳转详情
    detailClick(row){
          bus.$emit("homePage", {
            type: "jump",
            path: "/habitableroomDetail",
            title:this.habitableRoomManagement.fix,
         });
    },

    //跳转添加页面
    addList(){
      this.dialogVisible = true
    },

    //上一页
    prevePage(){
      this.pageNum= this.pageNum>this.firstPage ? this.pageNum-1 : this.firstPage;
      this.getList()
    },

    //下一页
    nextPage(){
      this.pageNum= this.pageNum<this.lastPage ? this.pageNum+1 : this.lastPage;
      this.getList()
    },

    //删除
    delet(row){
      this.deletDialogVisible = true
      this.rowList = row
    },

    //确认删除
    checkDelet(){
       this.$deleteList('omc/Room/lifeRoom/'+this.rowList.id,{},this.acceptLanguage).then(res =>{
         if(res.code == 200){
           this.deletDialogVisible = false
           this.getList()
           this.$message({message:res.message,type:"success"})
         }
      })
    },

    //获取房间数据
    getList(){
      let param ={
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        roomNo:this.searchNo
      }
      this.$get('omc/Room/listLifeRooms',param,this.acceptLanguage).then(res =>{
        res.list.forEach(item =>{
          if( item.checkInStatus ==1){
           item.checkInStatus= this.habitableRoomManagement.checkIn
          }else{
            item.checkInStatus= this.habitableRoomManagement.nocheck
          }
        })
        this.tableData = res.list
        this.total =Number(res.total) 
        this.currentPage = res.pageNum;
        this.firstPage= res.firstPage//第一页
        this.lastPage= res.lastPage//最后一页
      })
    },

    //翻页
    changePage(val){
      this.pageNum = val
      this.currentPage = val
      this.getList()
    },

    //搜索
    search(){
      this.pageNum = 1
      this.getList()
    },

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "background-color: #efefef";
      } else {
        return "background-color: #f9f9f9";
      }
    },

    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    },
  },
  created() {

  },
  mounted() {

  },
}
</script>
<style lang="scss" scoped>
.habitableRoomManagement{
  .border{
    width: 10px;
    height: 30px;
    background: black;
    margin-right: 10px;
  }
  .prevPage{
      background:#409efe;
      color:#ffffff;
    }
    .nextPage{
      background: #ffffff;
    }
  .addBtn{
    color:#7e7e7e;
  }
  .searchBtn{
    background: #409EFF;
    color: #ffffff
  }
  .detailBtn{
    background: #409EFF;
    color:#ffffff;
    border-radius: 5px;
  }
  .deleteBtn{
    background: #dddddd;
    color:#010101;
    border-radius: 5px;
  }
}
</style>